<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="lib/lib/css/bootstrap.min.css">
<style type="text/css">

.nav-justified>li.active>a, .nav-justified>li.active>a:focus, .nav-justified>li.active>a:hover{
    background-color: lightgreen;    
    border: 1px solid #fff;
    border-bottom: 3px solid red;
}
.nav>li>a:focus, .nav>li>a:hover{
	background-color: lightblue;
}

</style>
</head>
<body>

	<div class="container">
		<!-- 选项卡导航 -->
		<ul id="mytab" class="nav nav-justified">
			<li class="active"><a href="#home"  data-toggle="tab">hello</a></li>
			<li ><a href="#two" data-toggle="tab">two</a></li>
			<li class="dropdowm">
				<a href="#" id="mytab-drop1" class="dropdowm-toggle" data-toggle="dropdown">下拉<span class="caret"></span>
				</a>

				<ul class="dropdown-menu" role="menu">
					<li><a href="#dropOne" tabindex="-1" data-toggle="tab">one</a></li>
					<li id="jq-li"><a href="#dropTwo" tabindex="-1" data-toggle="tab">two</a></li>
				</ul>
			</li>
		</ul>
		
		<!-- 选项卡内容面板 -->
		<div class="tab-content">
			<div class="tab-pane fade in active" id="home">
				<h3>hellohellohellohellohello</h3>
			</div>
			<div class="tab-pane fade " id="two">
				<h1>twotwotwotwo</h1>
			</div>

			<div class="tab-pane fade" id="dropOne">
				<h2>drop-one</h2>
			</div>

			<div class="tab-pane fade " id="dropTwo">
				<h2>drop-two</h2>
			</div>

			

		</div>
	</div>



<br>
	<p class="visible-xs">当前屏幕尺寸：xs</p>
	<p class="visible-sm">当前屏幕尺寸：sm</p>
	<p class="visible-md">当前屏幕尺寸：md</p>
	<p class="visible-lg">当前屏幕尺寸：lg</p>
<br><br>

<script src="lib/jquery/jquery-1.11.0.min.js"></script>
<script src="lib/lib/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#mytab #jq-li a:eq(0)").tab("show")//将id为jq-li 的第一个a进行tab面板的显示
		$("a[data-toggle='tab' ").on( 'shown.bs.tab',function(e){
				console.log("a标签切换后就会弹出对话框")
		} )
	})
	


</script>

</body>
</html>